<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片展示</title>
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.1/css/all.min.css'>
    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat&amp;display=swap"rel="stylesheet'><link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="app">

        <div class="cardList">
            <!-- 左按钮 -->
            <button class="cardList__btn btn btn--left">
                <div class="icon">
                    <svg>
                        <use xlink:href="#arrow-left"></use>
                    </svg>
                </div>
            </button>
    
            <!-- 图片展示 -->
            <div class="cards__wrapper">
                <div class="card current--card">
                    <div class="card__image">
                        <img src="https://source.unsplash.com/JkTv__BqmaA" alt="" />
                    </div>
                </div>
    
                <div class="card next--card">
                    <div class="card__image">
                        <img src="https://source.unsplash.com/-w9NOJjythk" alt="" />
                    </div>
                </div>
    
                <div class="card previous--card">
                    <div class="card__image">
                        <img src="https://source.unsplash.com/DAJGyjEQPTk" alt="" />
                    </div>
                </div>
            </div>
    
            <!-- 右按钮 -->
            <button class="cardList__btn btn btn--right">
                <div class="icon">
                    <svg>
                        <use xlink:href="#arrow-right"></use>
                    </svg>
                </div>
            </button>
        </div>
    
        <!-- 对应的信息 -->
        <div class="infoList">
            <div class="info__wrapper">
                <div class="info current--info">
                    <h1 class="text name">Breakfast</h1>
                    <h4 class="text location">SLC, UT</h4>
                    <p class="text description">Classy meal for two</p>
                </div>
    
                <div class="info next--info">
                    <h1 class="text name">Pancake</h1>
                    <h4 class="text location">Hungary</h4>
                    <p class="text description">Delicious pancake breakfast</p>
                </div>
    
                <div class="info previous--info">
                    <h1 class="text name">Spaghetti</h1>
                    <h4 class="text location">Patra, Greece</h4>
                    <p class="text description">Spaghetti with meat sauce</p>
                </div>
            </div>
        </div>
    
    
        <!-- 对应的背景 -->
        <div class="app__bg">
            <div class="app__bg__image current--image">
                <img src="https://source.unsplash.com/JkTv__BqmaA" alt="" />
            </div>
            <div class="app__bg__image next--image">
                <img src="https://source.unsplash.com/-w9NOJjythk" alt="" />
            </div>
            <div class="app__bg__image previous--image">
                <img src="https://source.unsplash.com/DAJGyjEQPTk" alt="" />
            </div>
        </div>
    </div>
    
    <!-- 加载页面 -->
    <div class="loading__wrapper">
        <div class="loader--text">Loading...</div>
        <div class="loader">
            <span></span>
        </div>
    </div>
    
    <!-- 绘制按钮 -->
    <svg class="icons" style="display: none;">
        <symbol id="arrow-left" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>
            <polyline points='328 112 184 256 328 400'
                         style='fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px' />
        </symbol>
        <symbol id="arrow-right" xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'>
            <polyline points='184 112 328 256 184 400'
                         style='fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px' />
        </symbol>
    </svg>
    
    <!-- partial -->
      <script src='https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/gsap.min.js'></script><script  src="./script.js"></script> 
</body>
</html>